<template>
  <div class="login">
    <el-row class="el_row">
      <el-col :span="12" class="col2">
        <section class="form_continer">
          <div class="manage_tip">
            <span>注册</span>
          </div>
          <el-form
            ref="loginForm"
            :model="users"
            status-icon
            :rules="rules"
            label-width="80px"
            class="loginForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                type="text"
                v-model="users.username"
                placeholder="请输入用户名"
              />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="users.password"
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item label="重复密码" prop="password2">
              <el-input
                type="password"
                v-model="users.password2"
                placeholder="请再次输入密码"
              />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                type="text"
                v-model="users.email"
                placeholder="输入邮箱"
              />
            </el-form-item>
            <el-form-item label="昵称" prop="name">
              <el-input
                type="text"
                v-model="users.name"
                placeholder="输入昵称"
              />
            </el-form-item>
            <el-form-item label="选择头像" prop="userimg">
              <div
                class="imgbox"
                @click="dialogIsShow = !dialogIsShow"
                v-if="!isAdd"
              >
                <i class="iconfont icon-add"></i>
              </div>
              <div class="imgbox" @click="dialogIsShow = !dialogIsShow" v-else>
                <img :src="users.userimg" alt="">
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="submit"
                @click="register('loginForm')"
                >注册</el-button
              >
            </el-form-item>
          </el-form>
          <div class="tip">
            <div>点击<router-link to="/login">登录</router-link></div>
          </div>
        </section>
      </el-col>

      <el-col :span="12" v-show="isShow">
        <div class="left_content">
          <transition appear name="login_left">
            <div class="box">
              <div class="header">
                <img src="../../assets/image/register-bg.jpg" alt="" />
              </div>
              <div class="title">Welcome My Blog</div>
            </div>
          </transition>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="选择头像"
      :visible.sync="dialogIsShow"
      width="50%"
      class="dialog"
    >
      <div class="imgs">
        <span
          v-for="(item, index) in userimgs"
          :key="index"
          :class="{ 'img-box': true, active: item === selectimg }"
          @click="setImg(item)"
        >
          <img :src="item" alt="头像" />
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureAdd">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";

export default {
  name: "login",
  data() {
    //第二次密码比对规则
    const validatePass2 = (rule, value, callback) => {
      if (value !== this.users.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      isShow: true,
      isAdd:false,
      dialogIsShow: false,
      userimgs: {},
      selectimg:'',
      users: {
        username: "",
        password: "",
        password2: "",
        email: "",
        userimg: "",
        name:''
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "用户名须在2-30字符之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "密码长度须在6-30字符之间",
            trigger: "blur",
          },
        ],
        password2: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "密码长度须在6-30字符之间",
            trigger: "blur",
          },
          { validator: validatePass2, trigger: "blur" },
        ],
        userimg: [{ required: true, message: "头像必须添加", trigger: "blur" }],
        name: [{ required: true, message: "填入昵称", trigger: "blur" }],
      },
    };
  },
  created() {
    this.$axios.get("/api/image/getuserimg").then((res) => {
      console.log(res);
      this.userimgs = res.data;
    });
  },
  methods: {
    sureAdd() {
      this.dialogIsShow = !this.dialogIsShow;
      this.users.userimg = this.selectimg
      this.isAdd = true
    },
    setImg(item) {
      this.selectimg = item;
    },
    register(name) {
      //这里进行格式比对
      this.$refs[name].validate((valid) => {
        if (valid) {
          //比对成功再发送请求
          this.$axios
            .post("/admin/reg", this.users)
            .then((res) => {
              //登陆成功
              this.$message({
                type: "success",
                message: "注册成功",
              });
              //进行路由跳转
              this.$router.push("/login");
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("未知错误");
            });
        }
      });
    },
    //为空返回false，不为空返回true
    isNull(value) {
      return !(
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: rgba(95, 170, 207, 0.2);
  .dialog {
    .imgs {
      width: 100%;
      // height:100%;
      height: 200px;
      overflow: scroll;
      .img-box {
        display: block;
        width: 60px;
        height: 60px;
        float: left;
        margin: 5px;
        box-sizing: border-box;
        border-radius: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .img-box.active {
        border: 3px solid orange;
      }
    }
  }
  .el_row {
    width: 100%;
    height: 100vh;
    /* overflow: hidden; */
    .left_content {
      width: 100%;
      height: 100vh;
      background-color: #339999;

      .box {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .header {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .title {
          width: 100%;
          font-size: 32px;
          font-weight: 600;
          user-select: none;
          text-align: center;
          margin-top: -20%;
          color: #e8f1f1;
          filter: drop-shadow(0 0 10px skyblue);
        }
      }
    }
    .form_continer {
      width: 100%;
      height: 100vh;
      // height:100%;
      background-color: #fff;
      margin: 0 auto;
      position:relative;
      .manage_tip {
        width: 100%;
        padding-top: 10%;
        span {
          display: block;
          width: 100%;
          text-align: center;
          font-size: 24px;
          font-weight: 600;
          color: skyblue;
          padding: 10px 0 20px;
          user-select: none;
          filter: drop-shadow(5px 5px 15px skyblue);
        }
      }
      .loginForm {
        width: 55%;
        margin: 0 auto;
        // margin-left:10%;
        .imgbox {
          width: 60px;
          height: 60px;
          border: 1px solid #000;
          text-align: center;
          line-height: 60px;
          img {
            width:100%;
            height:100%;
          }
        }
        .submit {
          border-radius: 15px;
          filter: drop-shadow(5px 5px 10px skyblue);
        }
      }
    }
    .tip {
      width:100%;
      height:50px;
      // position:absolute;
      // bottom:0;
      // left:0;
      font-size: 13px;
      color: #aaa;
      text-align: center;
      user-select: none;
      a {
        color: skyblue;
      }
    }
  }
}

/* 左边的布局样式 */

.login_left-enter-active,
.login_left-leave-active {
  transition: all 0.7s ease-out;
}

.login_left-enter,
.login_left-leave-to {
  opacity: 0;
  transform: translateY(-175px);
}
.login_left-enter-to,
.login_left-leave {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 750px) {
  .left_content {
    display: none !important;
  }
  .col2 {
    width: 100%;
    .loginForm {
      width:80% !important; 
    }
  }
}
</style>

